<template>
  <div class="cart">
    <!-- 全选 -->
    <div>
      <label>
        全选
        <input type="checkbox" @change="selectAll"/>
      </label>
    </div>
    <!-- 商品信息 -->
    <div class="cart-item" v-for="(item,index) of list" :key="index">
      <div class="leftText">
        <input type="checkbox" v-model="item.cb" />
        <div class="lname" v-text="item.lname"></div>
        <div class="price" v-text="'￥'+item.price.toFixed(2)"></div>
      </div>
      <mt-button @click="deleteItem" :data-id="item.id" :data-lname="item.lname">删除</mt-button>
    </div>
    <div>
      购物车中商品的数量
      <span style="color:red">0</span>
      <mt-button @click="deleteItems">删除选中的商品</mt-button>
      <mt-button>清空购物车</mt-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [] //当前登录用户购物车列表
    };
  },
  created() {
    //当前组件创建成功回调函数
    this.loadMore();
  },
  methods: {
    //  功能：为全选按钮绑定事件 change
     selectAll(e){
      // 当全选按钮状态为checked=true,所有商品列表cb=true
      // 当全选按钮状态为checked=false,所有商品列表cb=false
      // 1.获取当前按钮的状态 true
      var cb =e.target.checked;
      // console.log(cb)
      // 2.创建循环遍历所有商品属性cb值与全选状态一致
      for (const item of this.list) {
        item.cb=cb;
        if (!item.cb) {
          cb=false;
        }
      }
     },
    // 功能：删除用户选中的多个商品
    deleteItems() {
      // 1.显示确认的对话框
      this.$messagebox
        .confirm("是否删除指定数据")
        .then(res => {
          // 2.创建变量保存选中的id值  id
          var id = "";
          // 3.创建循环遍历数组中每个元素
          for (const item of this.list) {
            // 4.判断当前元素属性cb是否等于true
            if (item.cb) {
              // 5.拼接id   1,2,3，
              id += item.id + ",";
            }
          }
          // 6.去掉字符串中最后的一个逗号
          id = id.slice(0, -1);
          console.log(id);
          // 7.判断一下用户是否选中商品  请选择需要删除的商品
          if (id == "") {
            this.$toast("请选择需要删除的商品");
            return;
          }
          // 8.创建url 创建obj 发送ajax请求
          var url = "delItems";
          var obj = { id };
          this.axios.get(url, { params: obj }).then(res => {
            // 9.获取服务器返回的数据
            // 10.判断删除多个商品是否成功
            if (res.data.code == -1) {
              this.$toast("删除失败");
            } else {
              this.$toast("删除成功");
              // 11.刷新操作  loadMore（）
              this.loadMore();
            }
          });
        })
        .catch();
    },
    deleteItem(e) {
      // 功能：用户点击删除按钮完成删除指定商品
      // alert(e.target.dataset.id)
      // 1.为按钮绑定单击事件调用deleteItem
      // 2.显示确认框如果用户选择确定
      this.$messagebox
        .confirm(`是否删除 ${e.target.dataset.lname}号商品?`)
        .then(res => {
          // 3.将当前商品id传递函数
          var id = e.target.dataset.id;
          // 4.发送ajax请示完成删除任务
          var url = "delItem";
          var obj = { id };
          this.axios.get(url, { params: obj }).then(res => {
            // 5.提示删除成功
            this.$toast("删除成功");
            // // 6.刷新页面
            this.loadMore();
          });
        })
        .catch(err => {});
    },
    loadMore() {
      //功能:获取当前用户购物车列表
      //1:创建url请求服务器地址
      var url = "carts";
      //2:发送ajax 请求(让服务器程序完成功能)
      this.axios.get(url).then(res => {
        if (res.data.code == -1) {
          //4:如果服务器返回-1 请登录
          this.$messagebox("消息", "请登录").then(res => {
            //回调函数（用户点击确认按钮后调用函数）
            this.$router.push("/Login");
          });
        } else {
          //3:获取服务器返回数据
          // this.list = res.data.data;
          // 添加一个新功能：为数据添加属性cb
          // 3.1:创建循环遍历res.data.data中的数据
          var rows = res.data.data;
          for (var item of rows) {
            // 3.2：为其添加属性cb值false
            item.cb = false;
          }
          // 3.3：将新数组赋值list（顺序）
          this.list = rows;
        }
      });
    }
  }
};
</script>

<style scoped>
/* 1.商品项目元素 */

.cart-item {
  display: flex;
  justify-content: space-between;
  align-content: center;
  border-bottom: 1px solid #ccc;
  margin-top: 20px;
}
.leftText {
  display: flex; /*子元素水平对齐*/
  align-items: center; /*垂直居中*/
}
/* 商品名称 */
.lname {
  margin-left: 25px;
}
.price {
  margin-left: 25px;
}
</style>